import React from 'react'
import { connect } from 'dva'
import { Form ,Button,Modal,Popconfirm,Table,Row,Col,Input,Select,Cascader,Icon,Checkbox ,DatePicker} from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './cxAllotCommissionListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx=classnames.bind(styles);
import { CustomCard} from '../../../widget/Grid/CustomCard'
import FlagBtn from 'widget/FlagBtn/FlagView'
const confirm = Modal.confirm;

const cxAllotCommissionListView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let { areaList,area1,biz,products } = modelObj

  let option = [
    { value: 'success', label: '处理成功' },
    { value: 'fail', label: '处理失败' },
    { value: 'processing', label: '处理中' },
  ]
  function centCommission(options){
    console.log(options)
    dispatch({
      type:`${namespace}/centCommission`,
      payload:{id:options}
    })
  }
 
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `3rd/commission/selectList`,
      //api_url: `admin/news/list`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        // type:2
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'regionId',
            zh_name: '所属区域',
            elem_type: 'Select',
            elem_valid_type: 'string',
            	//关联的更改的搜索字段
            cmpt_items:area1,
         },
         {
          en_name: 'province',
          zh_name: '所属城市',
          elem_type: 'Cascader',
          elem_valid_type: 'string',
          changeOnSelect:true,
          cmpt_items: areaList,
          split_keys: ['provinceCode', 'cityCode'],
          onFocus:()=>{
            area1.map((item,index)=>{
              console.log(biz.queryForm.regionId,item.value)
              if(biz.queryForm && biz.queryForm.regionId && biz.queryForm.regionId==item.value)
              {
                console.log(biz.queryForm.regionId,item.value)
                dispatch({
                  type: `${namespace}/updateStore`,
                  payload:{
                    areaList:item.children,
                  }
                })
              }
            })
          },
        },
        {
          en_name: 'projectId',
          zh_name: '项目名称',
          elem_type: 'Select',
          elem_valid_type: 'string',
          // showSearch:true,
          cmpt_items:products,
          onFocus:()=>{
            if(biz.queryForm && biz.queryForm.cityCode && biz.queryForm.cityCode)
            {
              dispatch({
                type: `${namespace}/getProduct`,
                payload:{
                  cityCode:biz.queryForm.cityCode,
                }
              })
            }
          },
        },
          {
            en_name: 'partnershipName',
            zh_name: '经纪人姓名',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'partnershipMobile',
            zh_name: '经纪人手机号',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'vbillno',
            zh_name: '佣金申请单',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'payStatus',
            zh_name: '分账状态',
            elem_type: 'Select',
            cmpt_items: option,
            elem_valid_type: 'string',
          },
          {
            en_name: 'validTime',
            zh_name: '登记日期',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['dmaketimeEnd', 'dmaketimeStrart'],
            elem_valid_type: 'string'
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 资讯标题 所属项目  所属城市 创建人 创建时间 更新人 更新时间   操作
      table:
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 4000},
          fields: [
            {
              en_name: "vbillno",
              zh_name: "佣金申请单号",
              width:150,
              fixed: 'left',
            },
            {
              en_name: "projectName",
              zh_name: "项目名称",
              // width:300
            },
            {
              en_name: "customerName",
              zh_name: "业主名称",
              // width:120,
            },
            {
              en_name: "customerMobiel",
              zh_name: "业主电话",
              // width:120,
            },
            {
              en_name: "qyfh",
              zh_name: "签约房号",
              // width:300,
            },
            {
              en_name: "yeitai",
              zh_name: "业态",
              // width:120,
            },
            {
              en_name: "cjje",
              zh_name: "成交金额",
              // width:120,
            },
            {
              en_name: "partnershipName",
              zh_name: "经纪人名称",
              // width:120,
            },
            {
              en_name: "partnershipCardno",
              zh_name: "身份证号码",
              // width:120,
            },
            {
              en_name: "partnershipMobile",
              zh_name: "手机号码",
              // width:120,
            },
            {
              en_name: "partnershipBankno",
              zh_name: "银行账号",
              // width:120,
            },
            {
              en_name: "partnershipBank",
              zh_name: "收款银行",
              // width:120,
            },
            {
              en_name: "partnershipQbid",
              zh_name: "云徙钱包ID",
              // width:120,
            },
            {
              en_name: "isqryhk",
              zh_name: "是否开通钱包",
              // width:120,
            },
            {
              en_name: "partnershipType",
              zh_name: "经纪人类型",
              // width:120,
            },
            {
              en_name: "tjrName",
              zh_name: "上级推介人姓名",
              // width:120,
            },
            {
              en_name: "tjrTel",
              zh_name: "上级推介人电话",
              // width:120,
            },
            {
              en_name: "userName",
              zh_name: "置业顾问",
              // width:120,
            },
            {
              en_name: "dmaketime",
              zh_name: "登记时间",
              // width:120,
            },
            {
              en_name: "sqMoney",
              zh_name: "费用金额",
              // width:120,
            },
            {
              en_name: "shMoney",
              zh_name: "收款",
              // width:120,
            },
            {
              en_name: "sfMoney",
              zh_name: "费用率",
              // width:120,
            },
            {
              en_name: "checkoutSum",
              zh_name: "结算金额",
              // width:120,
            },
            {
              en_name: "checkoutTime",
              zh_name: "结算时间",
              // width:120,
            },
            
            {
              en_name: "remark",
              zh_name: "备注",
              // width:120,
            },
            {
              en_name: "zyx2",
              zh_name: "账务日期",
              // width:120,
            },
            {
              en_name: "zyx1",
              zh_name: "分账状态",
              width:90,
              fixed: 'right',
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:50,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                    {item.c3Vbillstatus == '流程通过' && item.zjVbillstatus == 'paysuccess' && (item.payStatus == null || item.payStatus == '' ||item.payStatus=='fail')?
                    <FlagBtn
                        node={<Popconfirm  Collapse title='确定要分佣吗？' okText='确定' cancelText='取消' onConfirm={() => { centCommission(item.id,item.c3Vbillstatus,item.zjVbillstatus) }}>
                          <a >分佣</a>
                        </Popconfirm>}
                        btnId={''}>
                    </FlagBtn>:<span style={{color:'#999'}}>分佣</span>
                    }
                     {/* {item.payStatus !='processing' ||item.payStatus !='success'?
                     } */}
                    </span>
                )
              },
            }
          ]
        },
      // 操作栏
      action_bar: [
      ]
    },
  }
  
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }
  
  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(cxAllotCommissionListView))
